<template>
  <div class="view-resource">
    <div class="view-list" v-for="(item, index) in listKey" :key="index">
      <div class="key" :style="getStyle(index)">{{item.label}}</div>
      <div class="value" :style="getStyle(index)">{{form[item.name]}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'viewModule',
  props: {
    form: {
      type: Object,
      default: function () {
        return {
          sort: -1,
          name: '',
          code: '',
          url: '',
          picUrl: '',
          type: '',
          des: '',
          pid: ''
        }
      }
    }
  },
  data () {
    return {
      listKey: [
        {
          name: 'sort',
          label: '模块编号'
        },
        {
          name: 'name',
          label: '模块名称'
        },
        {
          name: 'code',
          label: '模块编码'
        },
        {
          name: 'url',
          label: '模块url'
        },
        {
          name: 'picUrl',
          label: '模块picUrl'
        },
        {
          name: 'type',
          label: 'add'
        },
        {
          name: 'des',
          label: '模块描述'
        },
        {
          name: 'pid',
          label: 'pid'
        }
      ]
    }
  },
  methods: {
    getStyle (index) {
      if (index % 2 === 0) {
        return `background: #f9f9f9`
      }
      return `background: #fff`
    }
  }
}
</script>

<style lang="scss" scoped>
  .view-resource {
    width: 660px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    left: 50%;
    .view-list {
      height: 39px;
      line-height: 39px;
      color: #444;
      width: 100%;
      display: flex;
      justify-content: flex-start;
      color: #666;
      font-size: 14px;
      .key {
        width: 150px;
        margin-right: 10px;
        padding-left: 30px;
      }
      .value {
        width: 500px;
        padding-left: 30px;
      }
    }
  }
</style>
